<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    :footer="null"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">


        <a-form-item label="医生名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['doctorName']" :disabled="true"></a-input>
        </a-form-item>
        <a-form-item label="评论标签" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-tag v-for="item in commentTagsList"
                 :value="item.id"
                 :key="item.id" :color="item.isGood == 0 ? 'green' : 'red'">{{ item.tagName }}</a-tag>
        </a-form-item>
        <!--<a-form-item label="疾病名称" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input v-decorator="['diseaseName']" :disabled="true"></a-input>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="态度评价" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-textarea v-decorator="['attitudeRemark']" :disabled="true"></a-textarea>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="用心评价" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-textarea v-decorator="['attentivelyRemark']" :disabled="true"></a-textarea>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="态度评分" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input-number v-decorator="['attitudeEvaluate']" :disabled="true"/>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="用心评分" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input-number v-decorator="['attentivelyEvaluate']" :disabled="true"/>-->
        <!--</a-form-item>-->
        <!--<a-form-item label="总评分" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
        <!--<a-input-number v-decorator="['totalScore']" :disabled="true"/>-->
        <!--</a-form-item>-->
        <a-form-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <img :src="getImgView(model.commentImage)" style="width: 100%"/>
        </a-form-item>

      </a-form>
    </a-spin>

    <div class="operation">
      <a-button @click="handleOk">通过</a-button>
      <a-button type="primary" @click="reviewReturn">拒绝</a-button>
    </div>

  </j-modal>
</template>

<script>

  import {httpAction, getAction} from '@/api/manage'
  import pick from 'lodash.pick'
  import {validateDuplicateValue} from '@/utils/util'
  import JDate from '@/components/jeecg/JDate'


  export default {
    name: "MedicalDoctorEvaluateModal",
    components: {
      JDate,
    },
    data() {
      return {
        form: this.$form.createForm(this),
        title: "操作",
        width: 800,
        visible: false,
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        confirmLoading: false,
        validatorRules: {},
        url: {
          add: "/hospital/medicalDoctorEvaluate/add",
          edit: "/hospital/medicalDoctorEvaluate/edit",
          review: "/hospital/medicalDoctorEvaluate/review",
        },
        commentTagsList: [],
        commentTagsIdList: []
      }
    },
    created() {
    },
    methods: {
      add() {
        this.edit({});
      },
      edit(record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        if (record.id) {
          this.commentTagsList = record.commentTagsList == null ? [] : record.commentTagsList;
          this.commentTagsIdList = record.commentTagsIdList == null ? [] : record.commentTagsIdList;
        } else {
          this.commentTagsList = []
          this.commentTagsIdList = []
        }
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'userId', 'doctorId', 'attitudeEvaluate', 'attitudeRemark', 'technologyEvaluate', 'diseaseId', 'attentivelyEvaluate', 'attentivelyRemark', 'helpEvaluate', 'helpRemark', 'additionalRemark', 'totalScore', 'userName', 'diseaseName', 'doctorName', 'commentImage', 'delFlag', 'commentTagsList', 'commentTagsIdList'))
        })
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleOk() {
        const that = this;
        //调用评论审核接口,传递通过参数
        getAction(this.url.review, {id: that.model.id, approvalStatus: 1}).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.$emit('ok');
          }
        });
      },
      handleCancel() {
        this.close()
      },
      popupCallback(row) {
        this.form.setFieldsValue(pick(row, 'userId', 'doctorId', 'attitudeEvaluate', 'attitudeRemark', 'technologyEvaluate', 'diseaseId', 'attentivelyEvaluate', 'attentivelyRemark', 'helpEvaluate', 'helpRemark', 'additionalRemark', 'totalScore', 'userName', 'diseaseName', 'doctorName', 'commentImage', 'delFlag', 'commentTagsList', 'commentTagsIdList'))
      },
      reviewReturn() {
        const that = this;
        //调用评论审核接口,传递通过参数
        getAction(this.url.review, {id: that.model.id, approvalStatus: 2}).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.$emit('ok');
          }
        });
      },
      getImgView(text) {
        if (text && text.indexOf(",") > 0) {
          text = text.substring(0, text.indexOf(","))
        }
        return text
      },
    }
  }
</script>

<style lang="less" scoped>
  .info-detail {
    line-height: 30px;
    font-size: 14px;
    color: #333333;
  }

  .info-owner .row {
    display: flex;
    flex-direction: row;
  }

  .info-owner .row div {
    margin-right: 30px;
  }

  .info-owner .row .item {
    display: flex;
    flex-direction: row;
    flex: 1;
    margin-right: auto;
  }

  .info-owner .row .item div:first-child {
    flex: 1;
  }

  .info-owner .row.has-bottom {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #dddddd;
  }

  .info-table {
    margin: 20px 0;
  }

  .operation {
    margin-top: 20px;
    text-align: right;
  }

  .column-item .ant-btn,
  .operation .ant-btn {
    margin-left: 20px;
  }

  .column-item .ant-btn:first-child,
  .operation .ant-btn:first-child {
    margin-left: 0px;
  }
</style>